<%--
Created by IntelliJ IDEA.
menu: Deja wu
Date: 2020/6/17
Time: 12:25
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理数据表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="${ctx}/resources/favicon.ico">
    <link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/resources/css/public.css" media="all" />
    <script type="text/javascript" src="${ctx}/resources/layui/layui.js"></script>
<%-- dtree引用了layui，所以要将layui.js放在dtree相关文件的上方，否则报错--%>

    <link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/font/dtreefont.css">
    <style type="text/css">
        .select-test {
            position: absolute;
            max-height: 500px;
            height: 350px;
            overflow: auto;
            width: 100%;
            z-index: 123;
            display: none;
            border: 1px solid silver;
            top: 42px;
        }
        .layui-show {
            display: block !important;
        }
    </style>
</head>
<body style="margin: 10px">

    <%-- 搜索条件开始 --%>
<%--    --%>
    <div class="layui-collapse" lay-filter="test">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">条件查询</h2>
            <div class="layui-colla-content">
                <div style="padding: 10px" id="queryDiv" >
                    <form class="layui-form" method="post" id="searchFrm">
                            <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">菜单名称:</label>
                                <div class="layui-input-inline" style="padding: 5px">
                                    <input type="text" name="title" autocomplete="off" class="layui-input layui-input-inline"
                                    placeholder="请输入菜单名称" style="height: 30px;border-radius: 10px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm" id="doSearch">查询 </button>
                                <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm">重置 </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <%-- 搜索条件结束 --%>


    <%-- 数据表格开始 --%>
    <table class="layui-hide" id="menuTable" lay-filter="menuTable">
        <div style="display: none;" id="menuToolBar">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
        </div>
        <div id="menuBar" style="display: none;">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
    </table>
    <%-- 数据表格结束 --%>


    <%-- 添加和修改的弹出层开始 --%>
    <div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
        <form class="layui-form " lay-filter="dataFrm" id="dataFrm" >
            <div class="layui-form-item">
                <label class="layui-form-label">父级菜单:</label>
                 <div class="layui-input-block">
                    <div class="layui-unselect layui-form-select" id="pid_div">
                        <div class="layui-select-title">
                            <input type="hidden" name="pid">
                            <input type="text" name="pid_str" id="pid_str" placeholder="请选择" lay-verify="required" readonly=""
                                   class="layui-input layui-unselect">
                            <i class="layui-edge"></i>
                        </div>
                    </div>
                    <div class="layui-card select-test" id="menuSelectDiv">
                        <div class="layui-card-body">
                            <div id="toolbarDiv">
                                <ul id="menuTree" class="dtree" data-id="0" style="width: 100%;"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称:</label>
                <div class="layui-input-block">
                    <div style="display: none">
                        <input type="text" name="id">
                    </div>
                    <input type="text" name="title" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单地址:</label>
                <div class="layui-input-block">
                    <input type="text" name="href" autocomplete="off"
                class="layui-input">
                </div>
            </div>

            <%--      菜单图标和Target放在一行     --%>
            <div class="layui-form-item layui-input-inline" >
                <label class="layui-form-label">菜单图标:</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">Target:</label>
                <div class="layui-input-inline">
                    <input type="text" name="target" autocomplete="off"
                class="layui-input">
                </div>
            </div>

            <%--      是否展开和是否可用放在一行     --%>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">是否展开:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="spread" value="1" title="是">
                    <input type="radio" name="spread" value="0" checked="checked" title="否">
                </div>
            </div>

            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">是否可用:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="available" value="1" checked="checked" title="是">
                    <input type="radio" name="available" value="0" title="否">
                </div>
            </div>

            <%-- 隐藏提交和重置按钮按钮 --%>
            <div class="layui-form-item layui-hide">
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="doSubmit" lay-filter="doSubmit" lay-submit="" >提交</button>
		            <button type="reset" class="layui-btn" id="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
<%-- 添加和修改的弹出层结束 --%>

<script type="text/javascript" src="${ctx}/resources/layui_ext/dist/dtree.js"></script>
<script type="text/javascript">

    let $;
    let layer;
    let form;
    let table;
    let dtree;
    let element;
    let tableIns; //数据表格
    let menuTree;  //添加和修改页面的下拉树

    layui.extend({
        dtree:'${ctx}/resources/layui_ext/dist/dtree'
    }).use([ 'jquery', 'layer', 'form', 'table','dtree','element'], function() {

        $ = layui.jquery;
        layer = layui.layer;
        form = layui.form;
        table = layui.table;
        dtree = layui.dtree;
        element = layui.element;

        //渲染数据表格
        tableIns=table.render({
            elem: '#menuTable' //渲染的目标对象
            ,url:'${ctx}/menu/loadMenuMangerList' //数据接口
            ,title: '菜单数据表'//数据导出来的标题
            ,toolbar:"#menuToolBar" //表格的工具条
            ,height:'auto'
            ,cellMinWidth:100 //设置列的最小默认宽度
            ,page: true //是否启用分页
            ,cols: [[ //列表数据
                {type: 'checkbox', fixed: 'left',width:'5%'}
                ,{field:'id', title:'ID',align:'center' ,width:'5%'}
                ,{field:'pid', title:'父节点ID',align:'center',width:'10%'}
                ,{field:'title', title:'菜单名称',align:'center',width:'14%'}
                ,{field:'href', title:'菜单地址',align:'center',width:'10%'}
                ,{field:'spread', title:'是否展开',align:'center',width:'10%',templet:function(d){
                return d.spread=='1'?'<font color="blue">是</font>':'<font color="red">否</font>';
                }}
                ,{field:'target', title:'TARGET',align:'center',width:'10%'}
                ,{field:'icon', title:'菜单图标',align:'center',width:'10%',templet:function(d) {
                return "<div class='layui-icon'>" + d.icon+ "</div>"
                }}
                ,{field:'available', title:'是否可用',align:'center',width:'10%',templet:function(d){
                return d.available=='1'?'<font color="blue">是</font>':'<font color="red">否</font>';
                }}
                ,{fixed: 'right',title: '操作',toolbar:'#menuBar',width:'15.5%',align: 'center'}
                ]],
            done:function (data, curr) {
                //不是第一页时，如果当前返回的数据为0那么就返回上一页
                if(data.data.length==0&&curr!=1){
                    tableIns.reload({
                        page:{curr:curr-1 }
                    })
                }
            }
        });

          //初始化添加和修改页面的下拉树
        menuTree = dtree.render({
            elem: "#menuTree",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response: {message: "msg", statusCode: 0},  //修改response中返回数据的定义
            dataFormat: "list",  //配置data的风格为list
            url: "${ctx}/menu/loadMenuMangerLeftTreeJson?spread=1",  // 使用url加载（可与data加载同时存在）
            icon: "2",
            accordion: true,//能否下拉
        });
        $("#pid_div").on("click", function () {
            $(this).toggleClass("layui-form-selected");
            $("#menuSelectDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
        });
        dtree.on("node(menuTree)", function (obj) {
            $("#pid_str").val(obj.param.context);
            $("#pid").val(obj.param.nodeId);
            $("#pid_div").toggleClass("layui-form-selected");
            $("#menuSelectDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        //监听头部工具栏事件
        table.on("toolbar(menuTable)",function(obj){
            switch(obj.event){
                case 'add':
                openAddmenu();
                break;
            };
        });

          //监听行工具事件
        table.on('tool(menuTable)', function(obj){
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                //先异步请求，查看当前菜单是否有子节点
                $.post("${ctx}/menu/checkMenuChildren?id="+data.id,function(obj) {
                    if(obj.code==0){
                        layer.msg("当前菜单有子节点，请先删除子节点")
                    }else {
                        layer.confirm('真的删除【'+data.title+'】吗', function(index){
                            layer.close(index);
                            //向服务端发送删除指令
                            $.post("${ctx}/menu/deleteMenu?id="+data.id,function(res) {
                                layer.msg(res.msg);
                                //数据表单刷新
                                tableIns.reload();
                                //刷新左边的树
                                window.parent.left.menuTree.reload();
                                //刷新添加和修改的下拉树
                                menuTree.reload();
                            })
                        });
                    }
                })
            } else if(layEvent === 'edit'){ //编辑
                openUpdateMenu(data)
            }
        });

        //条件查询
        $("#doSearch").click(function() {
            //搜索表单中的输入信息系列化
            let params = $("#searchFrm").serialize()
            tableIns.reload({
                url:'${ctx}/menu/loadMenuMangerList?'+params,
            })
        });

        //提交按钮
        form.on("submit(doSubmit)", function (obj) {
            //序列化表单数据
            let params = $("#dataFrm").serialize();
            $.post(url, params, function (obj) {
                layer.msg(obj.msg);
                //刷新数据 表格
                tableIns.reload();
                //刷新左边的树
                window.parent.left.menuTree.reload();
                //刷新添加和修改的下拉树
                menuTree.reload();
            })
            //提交成功，关闭弹出层
            layer.close(mainIndex);
        });

        let url;
        let mainIndex;
        //打开添加页面
        function openAddmenu(){
            mainIndex = layer.open({
                type:1,
                title:'添加菜单',
                content:$("#saveOrUpdateDiv"),
                area:['800px','410px'],
                btnAlign:'c',
                closeBtn:0,
                success:function(index){
                    url='${ctx}/menu/addMenu'
                    //每次打开后，先收起下拉树
                    $("#menuSelectDiv").removeClass("layui-show");
                    //每次打开前重置数据
                    $("#reset").click();
                },
                btn:['<div class="layui-icon layui-icon-ok">保存</div>','<div class="layui-icon  layui-icon-refresh">重置</div>','<div class="layui-icon layui-icon-close">关闭</div>'],
                yes:function(index, layero){
                    //调用隐藏提交按钮，提交表格
                    $("#doSubmit").click();
                },
                btn2:function(index, layero) {
                    layer.msg("重置");
                    //调用隐藏重置按钮，重置表格
                    $("#reset").click();
                    //重置成功，不关闭页面
                    return false
                },
                btn3:function(index, layero){
                    layer.msg("关闭");
                    //关闭页面
                    $("#reset").click();
                    return true;
                }
            });
        }

        //打开修改页面
        function openUpdateMenu(data){
            mainIndex = layer.open({
                type:1,
                title:'修改菜单',
                content:$("#saveOrUpdateDiv"),
                area:['800px','410px'],
                btnAlign:'c',
                closeBtn:0,
                success:function(index){
                    url='${ctx}/menu/updateMenu'
                    //每次打开后，先收起下拉树
                    $("#menuSelectDiv").removeClass("layui-show");
                    //需要修改的信息填入表格
                    form.val("dataFrm",data);
                    //反选下拉树
                    let pid = data.pid;
                    let params = dtree.dataInit("menuTree",pid);
                    $("#pid_str").val(params.context);
                },
                btn:['<div class="layui-icon layui-icon-ok">修改</div>','<div class="layui-icon  layui-icon-refresh">重置</div>','<div class="layui-icon layui-icon-close">关闭</div>'],
                yes:function(index, layero){
                    //调用隐藏提交按钮，提交表格
                    $("#doSubmit").click();
                },
                btn2:function(index, layero) {
                    layer.msg("重置");
                    //调用隐藏重置按钮，重置表格
                    $("#reset").click();
                    //重置成功，不关闭页面
                    return false
                },
                btn3:function(index, layero){
                    layer.msg("关闭");
                    //关闭页面
                    $("#reset").click();
                    return true;
                }
            });
        }
    });

    // 从左树传来id 刷新数据表
    function reloadTable(id) {
        tableIns.reload({
            url:'${ctx}/menu/loadMenuMangerList?id='+id,
        })
    }
</script>
</body>
</html>